<template>
    <div>

        <el-row>
            <el-col  :span="2">
                <el-input v-model="SelectMarketForm.shopName" style="width: 240px" placeholder="请输入店铺名称" @change="handleshopName" />
            </el-col>

            <el-col :push="5" :span="1">
                <el-input v-model="SelectMarketForm.shopAddress" style="width: 240px" placeholder="请输入店铺地址" @change="handleshopAddress" />
            </el-col>

            <el-col :push="11" :span="1">
                <el-input v-model="SelectMarketForm.shopPhone" style="width: 240px" placeholder="请输入店铺电话" @change="handleshopPhone" />
            </el-col>

        </el-row>

        <el-row style="margin-top: 10px;">

          <el-col  :span="2">
              <el-select v-model="SelectMarketForm.shopState" placeholder="请选择店铺状态" style="width: 240px" @change="handleshopState">
      <el-option
        v-for="item in cities"
        :key="item.value"
        :label="item.label"
        :value="item.value"
      />
    </el-select>
            </el-col>



            <el-col :push="5" :span="2">
              <el-select v-model="SelectMarketForm.isClosed" placeholder="请选择店铺营业状态" style="width: 240px" @change="handleisClosed">
      <el-option
        v-for="item in citie"
        :key="item.value"
        :label="item.label"
        :value="item.value"
      />
    </el-select>
            </el-col>
        </el-row>


      <!-- 对话框 -->
      <el-dialog v-model="dialogVisible" width="80%" center @close="onDialogClose">
        <img :src="currentImage" alt="放大后的图片" class="enlarged-photo" />
      </el-dialog>
  


      <el-dialog v-model="dialogVisibles" width="80%" center @close="onDialogCloses">
        <img :src="currentImages" alt="放大后的图片" class="enlarged-photo" />
      </el-dialog>

      <!-- 店铺信息列表 -->
      <el-row :gutter="20" type="flex" justify="space-around" style="margin-top: 10px;">
        <el-col
          v-for="(shopItem, index) in shopList"
          :key="index"
          :span="8"
          :xs="24"
          :sm="12"
          :md="8"
          :lg="6"
          :xl="6"
          style="margin-bottom: 20px;"
        >
          <el-card class="box-card">
            <div slot="header" class="card-header">
              <span>店铺信息详情</span>
            </div>
            <el-descriptions :column="1" border>
              <el-descriptions-item label="店铺名称">{{ shopItem.shopName }}</el-descriptions-item>
              <el-descriptions-item label="店铺地址(经纬度)">{{ shopItem.shopAddress }}</el-descriptions-item>
              <el-descriptions-item label="店铺电话">{{ shopItem.shopPhone }}</el-descriptions-item>
              <el-descriptions-item label="店铺状态">{{ shopItem.shopState==0?"正常":"禁用" }}</el-descriptions-item>
              <el-descriptions-item label="店铺评分">{{ shopItem.shopIntegral }}</el-descriptions-item>
              <el-descriptions-item label="店铺营业开始时间">{{ shopItem.shopStartTime }}</el-descriptions-item>
              <el-descriptions-item label="店铺营业结束时间">{{ shopItem.shopEndTime }}</el-descriptions-item>
              <el-descriptions-item label="店铺审核状态">{{ shopItem.checkStatus==0?"审核":shopItem.checkStatus==1? "审核通过":"驳回" }}  
                <el-button type="text"  @click="ViewAuditMaterials(shopItem)">查看审核资料</el-button>
              </el-descriptions-item>
              <el-descriptions-item label="是否临时关店">
    <el-tag :type="shopItem.isClosed === 0 ? 'success' : 'danger'" effect="dark">
      <i :class="shopItem.isClosed === 0 ? 'el-icon-check' : 'el-icon-close'"></i>
      {{ shopItem.isClosed === 0 ? "开启" : "关闭" }}
    </el-tag>
  </el-descriptions-item>
              <el-descriptions-item label="店铺头像">
                <img :src="shopItem.shopImage" alt="店铺头像" style="max-width:30px;" />
              </el-descriptions-item>
              <el-descriptions-item label="图片详情">
                <img :src="shopItem.shopPoto" alt="图片详情" style="max-width:30px;" @click="showImage(shopItem.shopPoto)" />
              </el-descriptions-item>
              <el-descriptions-item label="店铺描述">{{ shopItem.shopDescription }}</el-descriptions-item>
            </el-descriptions>
            <!-- 按钮组 -->
            <div class="button-group">
              <el-button type="text" @click="Adopt(shopItem)">通过</el-button>
              <el-button type="text" @click="Reject(shopItem)" >驳回</el-button>
            </div>
          </el-card>
        </el-col>
      </el-row>


      <el-drawer v-model="isShow252" title="审核资料" :with-header="false" size="70%" direction="ttb">
    <span ><el-card >
                    <el-form label-width="150px" style="margin-left: 30%;">
                        <el-form-item label="营业执照">
                            <el-image
                                v-if="shop.shopLicense"
                                :src="shop.shopLicense"
                                fit="contain"
                                style="width: 300px; height: 200px;"
                                @error="handleError"
                                @click="showImages(shop.shopLicense)"
                            />
                            <div v-else>暂无营业执照图片</div>
                        </el-form-item>

                        <el-form-item label="服务范围描述">
                            <div>{{ shop.serviceDescription }}</div>
                        </el-form-item>

                        <el-form-item label="审核状态">
                            <div>{{ shop.checkStatus==0?"待审核":shop.checkStatus==1?"审核通过":"驳回" }}</div>
                        </el-form-item>

                        <el-form-item label="驳回理由">
                            <div v-if="shop.rejectionReason">{{ shop.rejectionReason }}</div>
                            <div v-else>无</div>
                        </el-form-item>

                        <el-form-item label="申请提交时间">
                            <div>{{ shop.createdAt }}</div>
                        </el-form-item>

                        <el-form-item label="申请更新时间">
                            <div>{{ shop.updatedAt }}</div>
                        </el-form-item>
                    </el-form>
                </el-card></span>
  </el-drawer>



  <el-dialog
    v-model="show1111"
    title="通过审核"
    width="500"
    :before-close="handleClose"
  >
    <span v-if="shop==null">
        <p>你还未查看过审核资料确认通过？</p>
    </span>
    <span v-else>
        <p>你已查看过审核资料确认通过？</p>
    </span>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="show1111 = false">取消</el-button>
        <el-button type="primary" @click="ApprovedByReview">
          确认通过
        </el-button>
      </div>
    </template>
  </el-dialog>



  <el-dialog
    v-model="show1112"
    title="确认驳回？"
    width="500"
    :before-close="handleClose"
  >
    <span v-if="shop==null">
        <p>你还未查看过审核资料不能驳回</p>
    </span>
    <span v-else>
        <p>你已查看过审核资料确认驳回？</p>
        <el-input v-model="shop.rejectionReason" placeholder="请输入驳回理由"   style="width: 150px;" />
    </span>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="show1112 = false">取消</el-button>
        <el-button type="primary" v-if="shop!=null"  @click="ReviewRejected">
          确认驳回
        </el-button>
      </div>
    </template>
  </el-dialog>

  






      <div class="demo-pagination-block">
        <el-pagination
          v-model:current-page="SelectMarketForm.pageNum"
          v-model:page-size="SelectMarketForm.pageSize"
          :page-sizes="[1, 4, 6, 8]"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </div>

    </div>
  </template>
  
  <script>
  export default {
    name: 'ShopInfo',
    data() {
      return {
        PageForm: {
          pageNum: 1,
          pageSize: 20
        },
        shopList: [], // 用于存储多个店铺信息
        dialogVisible: false,
        dialogVisibles: false,
        currentImage: '',
        currentImages:'',
        FindServiceUserForm: {
          shopId: null,
          serviceName: null,
          serviceCategoryId: null,
          state: null,
          servicePrice: "",
          pageForm: {
            pageNum: 1,
            pageSize: 20
          }
        },
        shopService: [],
        isShow: false,
      
        SelectMarketForm:{
          shopName:null,
          shopAddress: null,
          shopPhone: null,
          shopState: null,
          isClosed: null,
          pageNum: 1,
          pageSize: 20

        },
        total: 0,
        UpdateShopForm:{
          shopId:null,

        },
        shop:null,
        isShow252: false,
        id:null,
        show1111:false,
        show1112:false,
        AuditDTO:{
            id:null,
            rejectionReason:null
        },
      };
    },
    methods: {
        handleisClosed(){
        if(this.SelectMarketForm.isClosed==null){
          alert("请输入店铺状态")
          return
        }
        this.getShopInfoList()

      },
      handleshopState(){
        if(this.SelectMarketForm.shopState==null){
          alert("请输入店铺状态")
          return
        }
        this.getShopInfoList()
      },
      handleshopPhone(){
        if(this.SelectMarketForm.shopPhone==null){
          alert("请输入店铺电话")
          return
        }
        this.getShopInfoList()

      },
      handleshopAddress(){
        if(this.SelectMarketForm.shopAddress==null){
          alert("请输入店铺地址")
          return
        }
        this.getShopInfoList()
      },


      handleshopName(){
        if(this.SelectMarketForm.shopName==null){
          alert("请输入店铺名称")
          return
        }
        this.getShopInfoList()
      },

        ReviewRejected(){
            this.$http.post("/market/shopApplication/updateShopApplication",this.AuditDTO).then(resp => {
                if(resp.data.code === 200){
                    alert(resp.data.message)
                    this.getShopInfoList();
                    this.show1112 = false;
                }
            }).catch(error => {
          console.error("获取失败:", error);
          this.$message.error("获取失败，请稍后再试。");
        });
        },
        Reject(obj){
            this.AuditDTO.id=obj.id;
            this.show1112 = true;

        },



        ApprovedByReview(){
           console.log(this.id)
            this.$http.get("/market/shopApplication/updateShopApplicationState",{
                params:{
                    id:this.id,
                }
            }).then(resp => {
                if(resp.data.code === 200){
                    alert(resp.data.message)
                    this.getShopInfoList();
                    this.show1111 = false;
                }
            }).catch(error => {
          console.error("获取失败:", error);
          this.$message.error("获取失败，请稍后再试。");
        });
        },
        Adopt(shop){
            this.id=shop.id;
            this.show1111 = true;

        },


        ViewAuditMaterials(order){
            this.shop=order;
            this.isShow252 = true;
        },



      Enable(obj){
        this.UpdateShopForm.shopId = obj.shopId;
        this.$http.post("/market/shopInfo/enableShop",this.UpdateShopForm).then(resp => {
          if(resp.data.code === 200){
            alert(resp.data.message)
            this.getShopInfoList();
          }
          }).catch(error => {
          console.error("获取失败:", error);
          this.$message.error("获取失败，请稍后再试。");
        });
        
      },
      Disable(obj){
        this.UpdateShopForm.shopId = obj.shopId;
        this.$http.post("/market/shopInfo/disableShop",this.UpdateShopForm).then(resp => {
          if(resp.data.code === 200){
            alert(resp.data.message)
            this.getShopInfoList();
          }
          }).catch(error => {
          console.error("获取失败:", error);
          this.$message.error("获取失败，请稍后再试。");
        });

      },
            handleSizeChange(val){
        this.SelectMarketForm.pageSize = val;
        this.getShopInfoList();

      },
      handleCurrentChange(val){
        this.SelectMarketForm.pageNum = val;
        this.getShopInfoList();
      },

      // 格式化价格方法
      formatPrice(value) {
        if (value !== undefined && value !== null) {
          return `￥${parseFloat(value).toFixed(2)}`;
        }
        return 'N/A';
      },
  
      // 格式化日期方法
      formatDate(date) {
        if (date) {
          return new Date(date).toLocaleString();
        }
        return 'N/A';
      },
  
   
      // JSON 解析方法，带错误处理
      parseJson(str, defaultValue) {
        try {
          return Array.isArray(str) ? str : JSON.parse(str);
        } catch (e) {
          console.warn('Failed to parse JSON:', str, e);
          return defaultValue;
        }
      },
  
   
  
      // 展示图片
      showImage(imageSrc) {
        this.currentImage = imageSrc;
        this.dialogVisible = true;
      },
      showImages(imageSrc) {
        this.currentImages = imageSrc;
        this.dialogVisibles = true;
      },
      // 关闭对话框时触发
      onDialogClose() {
        this.currentImage = '';
      },
  
      onDialogCloses() {
        this.currentImages = '';
      },
  
      // 获取店铺信息列表
      getShopInfoList() {
        this.$http.post("/market/shopInfo/SelectShopInfoPendingReview",this.SelectMarketForm)
          .then(resp => {
            this.shopList = resp.data.data.list; // 确保返回的是数组
            this.total = resp.data.data.total;
            console.log(this.shopList);
          })
          .catch(error => {
            console.error('Error fetching shop info list:', error);
          });
      }
    },
    created() {
      this.getShopInfoList();
    }
  };
  </script>
  
  <style scoped>
  /* 自定义样式 */
  .card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  
  .button-group {
    text-align: right;
    margin-top: 10px;
  }
  
  .el-descriptions-item__label {
    font-weight: bold;
  }
  
  .el-descriptions-item__content {
    word-break: break-all;
  }
  
  .enlarged-photo {
    max-width: 100%;
    max-height: 80vh;
    margin: auto;
    display: block;
  }
  
  .box-card {
    height: 100%;
    transition: transform 0.2s;
  }
  
  .box-card:hover {
    transform: scale(1.05);
  }
  
  @media (max-width: 768px) {
    .el-col {
      margin-bottom: 20px;
    }
  }
  </style>